<template>
  <base-context-menu
    :visible="menuVisible"
    :x="x"
    :y="y"
    :data="data"
    @update:visible="menuVisible = $event"
    @close="onClose"
  >
    <!-- 表组专用选项 -->
    <menu-item
      v-if="isTablesCategory"
      icon="View"
      label="查看全部表"
      command="viewAllTables"
      shortcut="Ctrl+T"
      @click="handleCommand"
    />
    
    <!-- 通用选项 -->
    <menu-item
      icon="Refresh"
      label="刷新"
      command="refresh"
      shortcut="F5"
      @click="handleCommand"
    />
  </base-context-menu>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch } from 'vue'
import BaseContextMenu from '../BaseContextMenu.vue'
import MenuItem from '../MenuItem.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  x: {
    type: Number,
    default: 0
  },
  y: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'command'])

const menuVisible = ref(props.visible)

// 判断是否为表类别
const isTablesCategory = computed(() => {
  return props.data && 
         props.data.type === 'category' && 
         props.data.category === 'tables';
})

// 监听props的变化
watch(() => props.visible, (newVal) => {
  menuVisible.value = newVal
})

// 监听内部状态的变化
watch(menuVisible, (newVal) => {
  emit('update:visible', newVal)
})

// 处理菜单命令
const handleCommand = ({ command }) => {
  emit('command', { command, data: props.data })
  menuVisible.value = false
}

// 菜单关闭事件
const onClose = () => {
  emit('update:visible', false)
}
</script> 